<template>
  <div class="login_cont">
    <img src="./images/close.png" class="close_btn" @click="close" />
    <img src="./images/logo.png" class="logo"/>

    <div class="input_group">
        <input type="text" placeholder="请输入您的手机号"  v-model="username" />
        <input type="password" placeholder="请输入登录密码" v-model="password" />
    </div>

    <div class="btn_group">
      <div class="login btn_item" @click="login">登 录</div>
      <div class="reg btn_item" @click="reg">注 册</div>
    </div>
    <div class="go_btn" @click="toshop">
      <div>先去商城逛逛</div>
      <img src="./images/left.png" />
    </div>
  </div>

</template>


<script>
  import userApi from '@/api/user'
  import router from '@/router/index'
  import ls from '@/util/localstorage'

export default{
  localStorage:{

  },
  name:'login',
  router,
  data:function(){
      return {
        username:'',
        password:''
      }
  },
  methods:{
    usernameInvalid(){
      console.log("username错误?");
    },
    close(){
      router.push('/');
    },
    login(){
      userApi.login(this.username,this.password,(rsp)=>{
//         ls.$localStorage.set("sxp","qqq");
//        console.log(this.$store.state.user.username);
//        this.$store.commit('setUsername',"wq");
//        console.log(this.$store.state.user.username);
        router.push('/index');
      });
    },
    reg(){
      console.log("reg");
    },
    toshop(){
      router.push('/index');
    }
  }
}

</script>




<style  lang="less">
.login_cont{
  font-family:'黑体';
  background: url(./images/loginbg.png) 0 0 no-repeat;
  background-size: cover;

  .close_btn{
    width:30/40rem;
    height:30/40rem;
    margin-left:570/40rem;
    margin-top:45/40rem;
  }
  .logo{
    width:215/40rem;
    height:183/40rem;
    margin:114/40rem (640-215)/2/40rem 0rem;
  }

/*input_group start*/
  .input_group{
    margin-top:123/40rem;
    width:640/40rem;
    height:156/40rem;

      @input-color:rgba(255,255,255,0.6);
　   input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
      color:@input-color;
    }
　　input:-moz-placeholder, textarea:-moz-placeholder {
      color:@input-color;
    }
　　input::-moz-placeholder, textarea::-moz-placeholder {
      color:@input-color;
    }
　　input:-ms-input-placeholder, textarea:-ms-input-placeholder {
      color:@input-color;
    }

    input{
      letter-spacing:5/40rem;
      font-family:'黑体';
      width:380/40rem;
      height:40/40rem;
      margin-left:(640-380)/2/40rem;
      margin-top:38/40rem;
      outline:none;
      border:0;
      border-bottom:1/40rem solid #ffffff;
      background-color:transparent;
      font-size:30/40rem;
      color:#ffffff;

    }
  }
/*input_group end*/

  .btn_group{
    width:640/40rem;
    height:200/40rem;
    margin-top:96/40rem;

    .btn_item{
      width:380/40rem;
      height:70/40rem;
      margin-left:(640-380)/2/40rem;
      margin-bottom:30/40rem;
      line-height: 70/40rem;
      border-radius:70/2/40rem;
      text-align:center;
      font-size:36/40rem;
    }
    .login{
      color:#e13600;
      background:#E0DEDA;
    }
    .reg{
      color:#fff;
      background: #1383D4;
    }
  }


  .go_btn{
    width:640/40rem;
    margin-top:120/40rem;
    color:#fff;
    div{
      margin-left:120/20rem;
      line-height:22/40rem;
      font-size:22/40rem;
    }
    img{
      margin-left:8/40rem;
      width:22/40rem;
      height:22/40rem;
    }
  }




}
</style>
